<template>
    <div class="acc-basic">
        <div class="page-tit">密码设置</div>
        <div class="pwd-form-box">
            <div class="step">
                <el-radio-group v-model="stepNumber" disabled>
                    <el-radio :label="1">验证身份<span class="split"></span></el-radio>
                    <el-radio :label="2">设置密码<span class="split"></span></el-radio>
                    <el-radio :label="3">改密成功</el-radio>
                </el-radio-group>
            </div>
            <form @submit="()=>{return false;}">
                <template v-if="stepNumber==1">
                    <div class="form-item">
                        <label>手机号</label>
                        <input class="max-340" type="text" placeholder="输入手机号" v-model="info.phone">
                        <!-- <input class="max-340" type="text" placeholder="输入手机号/邮箱" v-model="info.phone" v-if="info.phone"> -->
                        <!-- <input class="max-340" type="text" placeholder="输入手机号/邮箱" v-model="info.email" v-else> -->
                    </div>
                    <div class="form-item">
                        <div class="flex-inpbox">
                            <input class="max-340" v-model="code" type="text" placeholder="输入验证码"><a class="primary-btn" @click="handlGetCode">{{isSend?second+'秒后重试':'获取验证码'}}</a>
                        </div>
                    </div>
                </template>
                <template v-if="stepNumber==2">
                    <div class="form-item">
                        <label>新密码</label>
                        <input type="text" v-model="pwd" placeholder="请输入">
                    </div>
                    <div class="form-item">
                        <label>确认新密码</label>
                        <input type="text" v-model="pwd2" placeholder="请输入">
                    </div>
                </template>
                <template v-if="stepNumber==3">
                    <div class="succ-box">
                        <div class="succ-text">
                            修改登录密码成功
                        </div>
                        <div class="succ-tip">
                            为了您的账号安全，改密成功后，将全网退出，请重新登录
                        </div>
                        <a class="again-login" @click="handleAgainLogin">重新登录</a>
                    </div>
                </template>
                <div class="zxfot-btn" v-if="stepNumber!=3">
                    <!-- <a class="next-step" @click="handlePrev" v-if="stepNumber>1">上一步</a> -->
                    <a class="next-step" @click="handleNext">下一步</a>
                </div>
            </form>
        </div>
        <!-- <Login ref="refLogin"/> -->
    </div>
</template>

<script>
import Login from '@/components/Login'
import api from '@/api/api'
export default {
    components:{Login},
    data(){
        return {
            code:'',
            pwd:'',
            pwd2:'',
            isSend:false,
            stepNumber:1,
            second:60,
            timer:null,
            info:{

            }
        }
    },
    methods:{
        handleAgainLogin(){
            let parent=this.$parent;
            if(!parent.isAppMain){
                parent=parent.$parent;
            }
            if(!parent.isAppMain){
                parent=parent.$parent;
            }
            if(!parent.isAppMain){
                parent=parent.$parent;
            }
            if(!parent.isAppMain){
                parent=parent.$parent;
            }
            if(!parent.isAppMain){
                parent=parent.$parent;
            }
            if(parent.isAppMain){
                parent.showLoginView = true;
            }
        },
        handlePrev(){
            if(this.stepNumber==1)return;
            this.stepNumber--;
        },
        // 退出登录
        touchToOut: function () {
            localStorage.removeItem('userId');
            localStorage.removeItem('token');
        },
        async handleNext(){
            if(this.stepNumber==1){
                if(this.isSend==false){
                    this.$amessage.error('请先获取并填写验证码')
                    return;
                }else if(this.isSend&&!this.code){
                    this.$amessage.error('请填写验证码')
                    return;
                }else{
                    let res=await api.checkCode({phone:this.info.phone?this.info.phone:this.info.email,type:1,code:this.code});
                    if(res.code==0){
                        this.stepNumber++;
                        this.second=60;
                        this.isSend=false;
                        if(this.timer)
                            clearInterval(this.timer);
                    }
                }
            }
            else if(this.stepNumber==2){
                if(this.pwd!=this.pwd2){
                    this.$amessage.error('确认密码不一致')
                    return;
                }
                let res=await api.modyfiPwd({newPassword:this.pwd2});
                if(res.code==0){
                    this.touchToOut();
                    this.stepNumber++;
                }
            }
        },
        async handlGetCode(){
            
            if(this.isSend){
                this.$amessage.error('请勿频繁发送!');
                return;
            }
            let that = this;
            
            // if(this.info.phone){
                let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                if (!reg.test(that.info.phone)) {
                    this.$amessage.error('手机号码不正确!');
                    return
                }
            // }else{
            //     var reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            //     if(!reg.test(that.info.email)){
            //         this.$amessage.error("邮箱格式不正确");
            //         return;
            //     }
            // }
            let res=await api.sendSms({phone:this.info.phone,type:1});
            // let res=await api.sendSms({phone:this.info.phone?this.info.phone:this.info.email,type:1});
            if(res.code==0){
                that.isSend=true;
                this.$amessage.success('验证码已发送到您的手机上，请注意查收!');
                this.timer=setInterval(function(){
                    if(that.second==1){
                        that.second=60;
                        that.isSend=false;
                        clearInterval(that.timer);
                        return;
                    }
                    that.second--;
                },1000)
                
            }
        }
    },
    async mounted(){
        let res=await api.getUserInfo();
        if(!res.data.phone){
            this.$amessage.warn('请先绑定手机号码~');
            let that=this;
            setTimeout(()=>{
                that.$router.replace({path:'/personal/accountSet'})
            },1500)
            return;
        }
        if(res.data){
            if(res.data.tags)
                res.data.tags=res.data.tags.split(',');
            this.info=res.data;
        }
    }
}
</script>

<style lang="less">
.acc-basic{
    .page-tit{
        font-size:16px;
        font-weight:500;
        line-height:22px;
        margin-bottom:22px;
    }
    .succ-box{
        background:url('../../assets/pro/succ_ico.svg') no-repeat;
        text-align: center;
        background-position: center 20%;
        padding-top:95px;
        .succ-text{
            font-size:20px;
            color:#fff;
            font-weight:500;
            margin:16px auto 10px auto;
        }
        .succ-tip{
            font-size:12px;
            color:#969696;
            margin-bottom:35px;
        }
        .again-login{
            background:#11CCB1;
            color:#fff;
            line-height:40px;
            width:140px;
            text-align: center;
            border-radius: 8px;
            display: inline-block;
            font-size:14px;
            font-weight:500;
        }
    }
    .step{
        text-align: center;
        margin-bottom:36px;
        margin-top:32px;
        .split{
            height:2px;
            width:50px;
            background:#54545C;
            border-radius:2px;
            display: inline-block;
            position: relative;
            top:-5px;
            left:15px;
        }
        .el-radio-group{
            .el-radio__input .el-radio__inner{
                width:18px;height:18px;
                border-color:#424248;
                &:after{
                    width:6px;height:6px;
                    background:#23232A;
                }
            }
            .el-radio__input.is-checked .el-radio__inner{
                background:#11CCB1;
                border-color:#11CCB1;
            }
            .el-radio__input.is-checked+.el-radio__label{
                color:#fff;
            }
        }
    }
    .flex-inpbox{
        display: flex;
    }
    .primary-btn{
        color:#fff;
        background:#29272F;
        line-height:40px;
        width:100px;
        text-align: center;
        display: inline-block;
        font-size:14px;
        padding:0px 10px;
        font-weight:500;
        border-radius:8px;
        white-space: nowrap;
        user-select: none;
    }
    .pwd-form-box{
        width:428px;
        margin:0 auto;
    }
    .next-step{
        background:#11CCB1;
        color:#fff;
        line-height:40px;
        width:100%;
        text-align: center;
        border-radius: 8px;
        display: inline-block;
        font-size:14px;
        font-weight:500;
    }
}












































































</style>